<template>
    <div class="main-content">
        <div class="wrapper banner">
            <img src="../assets/images/icon/banner1.jpg" />
        </div>
        <div class="wrapper legal-dividers">
            <h2 class="wr-title"><span>法律分规</span></h2>
            <div class="content-block ld-block">
                <ul>
                    <transition @beforeEnter="beforeEnter" @enter="enter">
                        <li delay="1" class="ld-item" v-show="ldBlcok">
                            <div class="circle">
                                <img src="../assets/images/icon/book.png"/>
                            </div>
                            <p class="card-word">国际法规阅读</p>
                        </li>
                    </transition><!--
                    --><transition @beforeEnter="beforeEnter" @enter="enter">
                        <li delay="2" class="ld-item" v-show="ldBlcok">
                            <div class="circle">
                                <img src="../assets/images/icon/pen.png"/>
                            </div>
                            <p class="card-word">法规专题学习</p>
                        </li>
                    </transition><!--
                    --><transition @beforeEnter="beforeEnter" @enter="enter">
                        <li delay="3" class="ld-item" v-show="ldBlcok">
                            <div class="circle">
                                <img src="../assets/images/icon/learn.png"/>
                            </div>
                            <p class="card-word">注册法规发现</p>
                        </li>
                    </transition><!--
                    --><transition @beforeEnter="beforeEnter" @enter="enter">
                        <li delay="4" class="ld-item" v-show="ldBlcok">
                            <div class="circle">
                                <img src="../assets/images/icon/teach.png"/>
                            </div>
                            <p class="card-word">药品注册培训</p>
                        </li>
                    </transition>
                </ul>
            </div>
        </div>
        <div class="news">
            <div class="wrapper">
                <h2 class="wr-title"><span>新闻资讯</span></h2>
                <div class="content-block news-block">
                    <ul>
                        <li class="news-item" v-for="item in newsList">
                            <div class="date">
                                <span class="day">{{item.date}}</span>
                                <span class="year-and-month">{{item.year_month}}</span>
                            </div>
                            <div class="news-content">
                                <div class="news-title">{{item.name}}</div>
                                <div class="news-main" v-html="item.content"></div>
                                <router-link :to="{path:'/news-content',query:{q:item.id}}" class="news-more">查看详情</router-link>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="wrapper terms">
            <h2 class="wr-title"><span>术语学习</span></h2>
            <div class="terms-block">
                <div class="btn-group">
                    <button type="button" class="btn btn-azure btn-active">更多</button>
                </div>
                <transition-group @beforeEnter="termBeforeEnter" @enter="termEnter" class="clearfix" tag="ul">
                    <li class="terms-item" :index="index" :key="term.id" v-show="terms" v-for="(term,index) in termList" >
                        <p class="term-name">{{term.english}}</p>
                        <p class="term-explain">{{term.english_defines}}</p>
                        <p class="from">Source：{{term.sources}}</p>
                    </li>
                </transition-group>
            </div>
        </div>
        <div class="wrapper questions">
            <h2 class="wr-title"><span>问答专区</span></h2>
            <div class="questions-block">
                <div class="btn-group">
                    <button type="button" class="btn btn-azure btn-active">更多</button>
                </div>
                <transition-group class="clearfix" tag="ul">
                    <li class="question-item" :index="index" :key="item.id" v-show="questions" v-for="(item,index) in questionslist">
                        <div class="ask">{{item.english_title}}</div>
                        <div class="answer" v-html="item.english_content"></div>
                    </li>
                </transition-group>
            </div>
        </div>
        <div class="wrapper">
            <h2 class="wr-title"><span>友情链接</span></h2>
            <div class="content-block link-block">
                <ul style="margin-bottom:45px;">
                    <li class="link-item" v-for="link in linkList.slice(0,4)">
                        <div class="link-cell">
                            <div class="link-name">{{link.name}}</div>
                            <div class="link-logo"><img :src="link.src" /></div>
                        </div>
                    </li>
                </ul>
                <ul>
                    <li class="link-item" v-for="link in linkList.slice(4,8)">
                        <div class="link-cell">
                            <div class="link-name">{{link.name}}</div>
                            <div class="link-logo"><img :src="link.src" /></div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>
<script type="text/javascript">
    var Velocity = require("velocity-animate");
    import { format } from '../utils/utils.js';
    export default{
        data(){
            return{
                linkList:[
                    { name:'FDA',src:require('../assets/images/icon/fda.png') },
                    { name:'EMA',src:require('../assets/images/icon/ema.png') },
                    { name:'ICH',src:require('../assets/images/icon/ich.png') },
                    { name:'PIC/S',src:require('../assets/images/icon/pics.png') },
                    { name:'WHO',src:require('../assets/images/icon/who.png') },
                    { name:'PDA',src:require('../assets/images/icon/pda.png') },
                    { name:'EDQM',src:require('../assets/images/icon/edqm.png') },
                    { name:'CFDA',src:require('../assets/images/icon/cfda.png') },
                ],
                ldBlcok:false,
                terms:false,
                termList:[],
                termsLoadDone:false,
                questions:false,
                questionslist:[],
                questionsLoadDone:false,
                newsList:[]
            }
        },
        mounted(){
            this.ldBlcok = true;
            window.addEventListener('scroll', this.handleScroll);
            this.initNews();
        },
        methods:{
            beforeEnter:function(el){
                el.style.opacity = 0;
                el.style.top = '-10px';
            },
            enter: function (el, done) {
                const delay = el.getAttribute('delay')*500;
                Velocity(el, {
                    opacity: 1,
                    top:0
                },{
                    duration: 450,
                    delay:delay
                });
                done();
            },
            termBeforeEnter(el){
                const index = el.getAttribute('index');
                el.style.opacity = 0;
                if(index%2 == 0){
                    el.style.left = '-10px';
                }else{
                    el.style.left = '10px';
                }
            },
            termEnter(el,done){
                if(this.termsLoadDone){
                    const index = el.getAttribute('index')*500;
                    Velocity(el, {
                        opacity: 1,
                        left:0
                    },{
                        duration: 450,
                        delay:index
                    });
                    done();
                }

            },
            handleScroll() {
                var terms = document.getElementsByClassName('terms');
                var questions = document.getElementsByClassName('questions');
                if(window.scrollY >= terms[0].offsetTop - 300 && !this.termsLoadDone){
                    this.initTerms();
                    this.termsLoadDone = true;
                }
                if(window.scrollY >= questions[0].offsetTop - 300 && !this.questionsLoadDone){
                    this.initQuestionsList();
                    this.questionsLoadDone = true;
                }
            },
            initTerms(){
                this.$http.get('/term/list').then(res => {
                    this.termList = res.data.data.slice(0,6);
                    this.terms = true;
                }).catch(err => {

                })
            },
            initQuestionsList(){
                this.$http.get('/questions/list',{
                    parames:{
                        include:"category,statute"
                    }
                }).then(questions => {
                    this.questionslist = questions.data.data.slice(0,6);
                    this.questions = true;
                }).catch(err => {
                    this.$Message.error( 'questions');
                })
            },
            initNews(){
                this.$http.get('/news/list',{
                        params: {
                            page: 1,
                            category:'',
                            include:'category'
                        }
                }).then(res => {
                    this.newsList = res.data.data.slice(0,3);
                    this.newsList.forEach((item,index)=>{
                        item.date = format(item.inTimes,'dd');
                        item.year_month = format(item.inTimes,'yyyy-MM');
                    })
                }).catch(err => {

                })
            }
        }
    }
</script>
<style type="text/css" scoped>
    .wrapper{ max-width: 1200px; margin:0 auto 60px;}
    .banner{ margin-top:40px;}
    .banner img{ width:100%;}

    .wr-title{ font-size: 20px; color:#333; margin-bottom: 48px;}
    .wr-title span{ border:2px solid #15ccac; width:150px; height:40px; display:flex; margin:0 auto; justify-content: center; align-items: center; background:#fff; position: relative;}
    .wr-title span:after{ content: ''; position: absolute; width:80%; background:#fff; height:2px; bottom:-2px; left:10%;}
    .content-block ul,.content-block ul{ display:flex; justify-content: space-between;}
    .ld-item{ width:220px; padding-top: 15px; border:1px solid #aaa; background:url('../assets/images/icon/ld_bg.png') no-repeat; background-size:100%; position: relative;}
    .circle{ width:90px; height:90px; border-radius: 50%; border:1px solid #aaa; margin:0 auto; display:flex;align-items: center; justify-content: center; margin-top: 32px; transition:all 0.2s linear;}
    .circle:hover{ transform:translateY(-5px);}
    .card-word{ text-align: center; margin:32px 0 43px; font-size: 16px;}

    .news{ background:#f3fbfa; width:100%; margin:20px 0;}
    .news .wrapper{ padding:20px 0;}
    .news .wrapper .wr-title span,.news .wrapper .wr-title span:after{ background:#f3fbfa;}
    .news-item{ width:30%; height:240px; position: relative; padding:25px; cursor: default;}
    .date{ width:45px; float: left;}
    .day{ font-size: 38px;}
    .year-and-month{ font-size: 12px;}
    .news-content{ margin-left: 67px;}
    .news-title{ font-size: 14px; line-height: 1.5; border-bottom: 1px solid #ccc; padding-bottom: 5px;}
    .news-main{ font-size: 12px; line-height: 1.5; margin-top:13px;
        height:54px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
    }
    .news-more{ padding:5px 10px; font-size: 14px; border:1px solid #333; display:inline-block; position: absolute; bottom:50px; color:#333;}
    .news-item,.date,.day,.year-and-month,.news-content,.news-title,.news-main,.news-more{ transition: all 0.4s ease-out;}
    .news-item:hover{ box-shadow: 0 2px 10px rgba(60,60,60,0.4);}
    .news-item:hover .news-title,
    .news-item:hover .day,
    .news-item:hover .year-and-month,
    .news-item:hover .news-title,
    .news-item:hover .news-main,
    .news-item:hover .news-more{ border-color:#15ccac; color:#15ccac;}
    .news-item .news-more:hover{ box-shadow: 0 2px 10px rgba(60,60,60,0.4); background:#15ccac; color:#fff;}

    .btn-group{ display:flex; justify-content: center;}
    .btn-azure{ border:1px solid #15ccac; color:#15ccac; border-radius: 3px; cursor:pointer;}
    .btn-active{ background:#15ccac; color:#fff;}

    .terms-block ul{ margin-top:18px; min-height:300px;}
    .terms-item{ background:#f3f3f3; padding:24px; width:48%; float: left; position: relative; height:138px; margin-bottom: 20px; transition:all 0.45s linear; border:1px solid #e5e5e5;}
    .terms-item:hover{ box-shadow:0 2px 7px rgba(0,0,0,0.1); }
    .terms-item:nth-of-type(2n-1){ margin-right: 2%;}
    .terms-item:nth-of-type(2n){ margin-left: 2%;}
    .term-name{ color:#15ccac; font-size: 16px; line-height: 1.5;}
    .term-explain{ font-size: 12px; line-height: 24px;
        height:48px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }
    .from{ position: absolute; bottom:24px; left:24px;}

    .questions-block ul{ border:4px solid #eee; margin-top:18px; min-height:398px;}
    .question-item{ width:48%; float: left; position: relative;}
    .question-item:nth-of-type(2n-1){ margin-right: 2%;}
    .question-item:nth-of-type(2n){ margin-left: 2%;}
    .ask,.answer{ padding:0 20px 0 64px; height:80px;}
    .ask{ background:url('../assets/images/icon/ask.png') no-repeat 20px center; font-size: 16px; line-height: 1.5; padding-top:10px; padding-bottom:10px;
        height:60px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }
    .answer{ background:#eee url('../assets/images/icon/answer.png') no-repeat 20px center; line-height: 1.5; color:#15ccac;
        padding-top:5px; padding-bottom:5px;
        height:70px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
    }
    .link-item{ width:238px; height: 150px; border: 3px solid #cdcdcd; display:table;}
    .link-cell{ display:table-cell; vertical-align: middle; text-align: center;}
    .link-name{ margin-bottom: 15px; font-size: 18px;}
    .link-logo img{ margin:0 auto;}

    @media (max-width:1024px){
        .wr-title{ font-size:16px;}
        .wr-title span{ width:120px; height:30px;}
        .ld-item{ width:180px;}
        .circle{ width:70px; height:70px;}
        .circle img{ width:40px;}
        .card-word{ margin:24px 0 35px; font-size:14px;}
        .news-more{ bottom:30px;}
        .news-title{
            height:45px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
        }
        .news-main{
            height:55px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
        }

        .link-item{ width:190px; height:140px;}
        .link-name{ margin-bottom:5px;}
    }
    @media (max-width:768px){
        .wr-title{ margin-bottom:25px;}
        .ld-block ul,.news-block ul,.link-block ul{ display:block;}
        .ld-block ul li{ display:inline-block; width:25%; border:none; background:none; padding:0;}
        .circle{ margin-top:10px; width:50px; height:50px;}
        .circle img{ width:30px;}
        .card-word{ font-size:12px;}

        .news-block ul{ padding:0 15px;}
        .news-item{ width:100%; height:200px;}
        .news-more{ bottom:20px;}
        .terms-block .terms-item{ width:100%; margin:0 0 20px 0;}
        .questions-block ul{ border:0;}
        .questions-block .question-item{ width:100%; margin: 0; border-top: 1px solid #eee; border-bottom:1px solid #eee; margin-top:10px; font-size:12px;}
        .answer{ height:60px; }
        .link-block ul{ padding:0 5%; margin:0 !important;}
        .link-item{ width:48%; height:140px; display:inline-table; margin-bottom:10px;}
        .link-item:nth-of-type(2n-1){ margin-right:4%;}
        .link-logo img{ height:70px;}
    }
</style>